<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制界面</title>
    <link rel="stylesheet" href="css/control.css">
</head>
<body>
    <!-- 头部的盒子 -->
    <header>
        <h1>控制界面</h1>
        <div class="showTime"></div>
        <script>
          var t = null;
          t = setTimeout(time, 1000); //開始运行
          function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
              "当前时间：" +
              y +
              "年" +
              mt +
              "月" +
              day +
              "日" +
              "-" +
              h +
              "时" +
              m +
              "分" +
              s +
              "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
          }
        </script>
      </header>
    <div class="title w">
        <div style="display: inline-block;height: 30px;font-size: 25px; color: aliceblue;">湿度调节</div>  

        <div style="float: right; color: aliceblue;line-height: 30px;">
          <label for="temperature">湿度阈值：</label>
          <input type="number" id="temperature" min="10" max="120" step="1" value="100">
          <span></span>  
        </div>

    </div>
    <div class="main content w">
        <div class="chart">图标</div>
        <div class="footer"></div>
    </div>

    <script src="js/echarts.min.js"></script>
    <!-- <script src="js/control.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
      function fetchhumidityitems(){          
        $.ajax(
          {
            type:"get",
            url:"http://127.0.0.1:8080/turn",
            success:function(result){
              let timer = [];
              let temp1 =[];
              let temp2 = [];
		      let temp3 = [];
              for(let item of result){
                timer.push(Object.keys(item)[0]);
                item = Object.values(item)[0];
                temp1.push(item['humidity1']);
                temp2.push(item['humidity2']);
                temp3.push(item['humidity3']);
              }
              var yearData = [
                {
                  year: "2020", // 年份
                  data: [
                    // 三个数组是因为有两条线
                    temp1,temp2,temp3
                  ]
                },
              ];
                // 1. 实例化对象
                var myChart = echarts.init(document.querySelector(".main .chart"));
                // 2.指定配置
                var option = {
                // 通过这个color修改两条线的颜色
                color: ["#00f2f1", "#ed3f35","#ede640"],
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    // 如果series对象有name 值，则legend可以不用写data
                    // 修改图例组件 文字颜色
                    textStyle: {
                    color: "#4c9bfd"
                    },
                    // 这个10% 必须加引号
                    right: "10%"
                },
                grid: {
                    //控制图表大小
                    top: "8%",
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    show: true, // 显示边框
                    borderColor: "#012f4a", // 边框颜色
                    containLabel: true // 包含刻度文字在内
                },
                toolbox:{
                    feature:{
                    saveAsImage:{}
                    }
                },
                
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: timer,
                    axisTick: {
                    show: false // 去除刻度线
                    },
                    axisLabel: {
                    color: "#4c9bfd" // 文本颜色
                    },
                    axisLine: {
                    show: false // 去除轴线
                    }
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                    show: false // 去除刻度线
                    },
                    axisLabel: {
                    color: "#4c9bfd" // 文本颜色
                    },
                    axisLine: {
                    show: false // 去除轴线
                    },
                    splitLine: {
                    lineStyle: {
                        color: "#012f4a" // 分割线颜色
                    }
                    },
                    min: 50,
                max: 100,
                interval: 5,
                },
                series: [
                    {
                    name: "湿度1",
                    type: "line",
                    // true 可以让我们的折线显示带有弧度
                    smooth: true,
                    data: yearData[0].data[0]
                    },
                    {
                    name: "湿度2",
                    type: "line",
                    smooth: true,
                    data: yearData[0].data[1]
                    },
                    {
                        name: "湿度3",
                        type: "line",
                        smooth: true,
                        data: yearData[0].data[2]
                    }
                ]
                };
                
                // 3. 把配置给实例对象
                myChart.setOption(option);
                // 4. 让图表跟随屏幕自动的去适应
                window.addEventListener("resize", function() {
                myChart.resize();
                });
            }
          }

        )
      }
          
      (function() {
        setInterval(fetchhumidityitems,2000)
        })();
      fetchtempitems();
    </script>


</body>
</html>